<template>
	
	
	<view>
		
		<view class="content">
			
			<view class="header">
				<view class="c-head">批量支付中心</view>
				<view class="c-confirm">请检查确认无误再支付~</view>
			</view>
			
			<view class="order-lists">
				
				<checkbox-group @change.stop="orderSelChange">
					<view class="ol-item" v-for="(item,index) in order_lists">
					
					<view class="oli-title head">
						<view class="ot-title">操作</view>
						<view class="ot-val">
							<checkbox style="transform:scale(0.8)" :value="''+item.id"/>
						</view>
					</view>
					
					<view class="oli-title">
						<view class="ot-title">商品:</view>
						<view class="ot-val">{{item.title}}</view>
					</view>
					
					<view class="oli-title">
						<view class="ot-title">收件人:</view>
						<view class="ot-val">{{item.linkman}}</view>
					</view>
					
					<view class="oli-title">
						<view class="ot-title">手机号:</view>
						<view class="ot-val">{{item.tel}}</view>
					</view>
					
					<view class="oli-title">
						<view class="ot-title">地址:</view>
						<view class="ot-val">{{item.address}}</view>
					</view>
					
					<view class="oli-title">
						<view class="ot-title">备注:</view>
						<view class="ot-val">{{item.message}}</view>
					</view>
				
					<view class="oli-title">
						<view class="ot-title">金额:</view>
						<view class="ot-val">{{item.totalprice}}</view>
					</view>
					
				</view>
				</checkbox-group>
			</view>
			
			<view class="footer">
				
				<view class="sub-items">
					<view class="si-title">待支付金额：</view>
					<view class="si-val">
						<view class="sv-val">￥{{order_sum}}(共{{order_nums}}个订单)</view>
					</view>
				</view>
				<view class="sub-items">
					<view class="si-title">当前余额：</view>
					<view class="si-val">
						<view class="sv-val">￥{{balance}}</view>
					</view>
				</view>
				<view class="ops">
					<button class="btn-pay" @tap="pay()">余额支付</button>
					<button class="weixinbtn-pay" @tap="wxpay()">微信支付</button>
					<button class="btn-recharge" @tap="recharge()">余额充值</button>
					<button class="btn-addorder" @tap="addorder()">添加订单</button>
					<button class="btn-delorder" @tap="delorder()">删除订单</button>
				</view>
				
			</view>
			
			
		</view>
	</view>
</template>

<script>
	
	var app = getApp();
	
	export default{
		data(){
			return {
				order_lists:[],
				order_sum:0,
				balance:0,
				order_nums:0,
				oids:[],
				selected_oids:[]
			}
		},
		onLoad(option) {
			let that = this;
			var oids = uni.getStorageSync('tmp_oids');
			if(oids == null){
				app.alert('参数已过期，请返回重试',()=>{
					app.goback(false);
				});
				return;
			}
			that.init_order_confirm(oids);
		},
		methods:{
			wxpay(){
				// let orderdata={
				// 	orderid:Number(this.oids),
				// 	op:'submit',
				// 	typeid:2
				// }
				// app.post('ApiPay/pay',orderdata,function(res){
				// 	console.log('点击了微信支付1',res)
				// })
				var that = this;
				that.loading = true;
				app.post('ApiOrder/payorderwx',{oids:that.oids},(res)=>{
					that.loading = false;
					if (res.status == 0) {
						app.error(res.msg);
						return;
					}
					app.goto('/pages/pay/pay?id='+res.payorderid);
				});
			},
			orderSelChange(e){
				let that = this;
				that.selected_oids = e.detail.value;
				console.log(e.detail.value);
			},
			addorder(){
				let that = this;
				app.confirm('将前往添加订单页面，确定吗?',()=>{
					app.goto('/pages/luru/shouLuru?from_oids='+that.oids);
				});
			},
			delorder(){
				let that = this;
				if(that.selected_oids.length == 0){
					app.alert("请先选择订单");
					return;
				}
				app.confirm('确定删除选择的订单吗?',()=>{
					app.post('ApiOrder/del_orders',{oids:that.selected_oids.join(',')},(res)=>{
						if(res.status == 1){
							var data = res.msg;
							if(data.length > 0){
								var _new_order_lists = [];
								for(var idx in that.order_lists){
									var _item = that.order_lists[idx];
									var is_del = false;
									for(var idx2 in data){
										var _item2 = data[idx];
										if(_item.id == _item2){
											is_del = true;
										}
									}
									if(!is_del){
										_new_order_lists.push(_item);
									}
								}
								that.order_lists = _new_order_lists;
								
								var oids = [];
								for(var idx in that.order_lists){
									var item = that.order_lists[idx]
									oids.push(item.id)
								}
								
								uni.setStorageSync('tmp_oids', oids.join(','));
								
								that.oids = oids.join(',');
								that.init_order_confirm(that.oids);
								
							}
						}
					});
				});
			},
			init_order_confirm(oids){
				let that = this;
				that.oids = oids;
				
				if(!oids || oids.length < 1){
					app.confirm('还没有订单，跳转手动下单页面吗?',()=>{
						uni.navigateTo({
							url:'/pages/luru/shouLuru'
						});
					});
					return;
				}
				
				app.post('ApiOrder/payorder_confirm',{oids:oids},(res)=>{

					if(res.status == 1){
						var data = res.msg;
						that.order_lists = data.order_lists;
						that.order_sum = data.order_sum;
						that.balance = data.balance;
						that.order_nums = that.order_lists.length
					}else{
						app.alert(res.msg);
					}
					
				});
				
			},
			pay(){
				app.confirm("请确保余额充足，否则失败",()=>{
					let that = this;
					app.post('ApiOrder/payorder',{oids:that.oids},(res)=>{
						if(res.status == 1){
							app.alert(res.msg,()=>{
								app.goback(true);
							});
						}
					});
					
				});
			},
			recharge(){
				uni.navigateTo({
					url:'/pages/money/recharge'
				})
			}
		}
	}
	
</script>

<style>
	
	.c-head{
		height: 2.5rem;
		line-height: 2.5rem;
		text-align: center;
		width: 100%;
		border-bottom: 0.01rem solid #e2e2e2;
		font-size: 1.3rem;
	}
	
	
	.order-lists{
		height: 100%;
		overflow-y: auto;
		width: 100%;
		margin-bottom: 8rem;
		margin-top: 6rem;
		display: inline-block;
	}
	
	.ol-item{
		display: flex;
		flex-direction: column;
		margin: 0.5rem;
		background-color: white;
		padding: 0.5rem;
		border-radius: 0.35rem;
		margin-bottom: 0.25rem;
	}
	
	.ol-item:active{
		background-color: #e6e6e6;
	}
	
	.oli-title{
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		margin-bottom: 0.5rem;
		border-bottom: 0.01rem dashed #e6e6e6;
	}
	
	.oli-price{
		width: 3rem;
		flex-shrink: 0;
	}
	
	.ot-title{
		width: 4rem;
		text-align: right;
		color: #aeaeae;
		padding-left: 0.35rem;
	}
	
	.oli-title.head .ot-title{
		font-weight: bold;
		color: black;
	}
	
	.oli-title.head{
		border-bottom: 0.01rem solid black;
	}
	
	.ot-val{
		width: 100%;
		text-align: right;
	}
	
	.ops{
		display: flex;
		flex-direction: row;
	}
	.weixinbtn-pay{
		width: 5rem;
		text-align: center;
		font-size: 0.8rem;
		border-radius: 0.2rem;
		background: green !important;
		color: #fff !important;
	}
	
	.btn-pay,
	.btn-recharge,
	.btn-delorder,
	.btn-addorder{
		width: 5rem;
		text-align: center;
		font-size: 0.8rem;
	}
	
	.btn-recharge{
		margin-left: 1rem;
	}
	
	.c-confirm{
		height: 2rem;
		line-height: 2rem;
		text-align: center;
		color: red;
		margin-top: 1rem;
		margin-bottom: 1rem;
		font-size: 1.3rem;
	}
	
	.sub-items{
		display: flex;
		width: 100%;
		flex-direction: row;
		height: 2rem;
		border-bottom:0.01rem solid #e6e6e6;
	}
	
	.si-title
	{
		width: 7rem;
		flex-shrink: 0;
		text-align: right;
		height: 2rem;
		line-height: 2rem;
	}
	
	.si-val{
		width: 100%;
		height: 2rem;
		line-height: 2rem;
		text-align: right;
		color: red;
		margin-right: 1.5rem;
	}
	
	.sv-val{
		width: 8rem;
		text-align: right;
		height: 2rem;
		line-height: 2rem;
		float: right;
	}
	
	.btn-pay,
	.btn-delorder{
		color: white;
		background-color: red;
		border-radius: 0.35rem;
	}
	
	.btn-delorder{
		background-color: #aeaeae;
	}
	
	.btn-addorder{
		color: white;
		background-color: #55aaff;
		border-radius: 0.35rem;
	}
	
	
	.btn-recharge{
		color: white;
		background-color: #00aaff;
		border-radius: 0.35rem;
	}
	
	.ops{
		margin-top: 0.5rem;
	}
	
	.footer{
		position: fixed;
		height: 7.5rem;
		z-index: 666;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #e2e2e2;
		box-shadow: -3px -2px 5px darkgrey;
	}
	
	.header{
		height: 6rem;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		background-color: #e2e2e2;
		box-shadow: -4px 3px 5px darkgrey;
	}
	
</style>